<template>
  <div class="app">
    <router-view v-slot="{ Component }">
      <transition :name="animation">
        <keep-alive exclude="RecommendSongs,Comment">
          <component :is="Component"></component>
        </keep-alive>
      </transition>
      <footerControl></footerControl>
    </router-view>
  </div>
  
  <!-- 底部弹出框 -->
  <action-sheet v-if="$store.state.actionSheetConfig.isShow"></action-sheet>
</template>

<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import ActionSheet from "./components/ActionSheet.vue";
import footerControl from './components/footerControl.vue'
export default {
  name: "App",
  components: { ActionSheet,footerControl },
  setup(props, context) {
    const route = useRoute();
    const animation = ref("slide");
    let routeIndex = route.meta.index;
    watch(route, () => {
      animation.value =
        route.meta.index < routeIndex ? "slide-right" : "slide-left";
      routeIndex = route.meta.index;
    });
    //阻止右键默认行为
    document.addEventListener("contextmenu", (event) => {
      event.preventDefault();
    });

    return { animation };
  },
};
</script>
<style lang="less">
.main+.footer_control{
  bottom: 60px;
}
.app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "微软雅黑";
}

.icon {
  width: 0.7rem;
  height: 0.7rem;
}

.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-enter-to,
.slide-leave-from,
.slide-left-leave-to {
  transform: translateX(0);
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 200ms linear;
  position: fixed;
}

//向右
.slide-left-enter-from {
  transform: translateX(-100%);
}
.slide-left-enter-to,
.slide-leave-from,
.slide-left-leave-to {
  transform: translateX(0);
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 200ms linear;
  position: fixed;
}
</style>
